<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - OA办公系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="bg-gray-50 h-screen overflow-auto p-6">
    <div class="container mx-auto fade-in">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">系统设置</h1>
            <div class="flex space-x-2">
                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center btn-hover-effect">
                    <i class="fas fa-save mr-2"></i>
                    <span>保存设置</span>
                </button>
            </div>
        </div>

        <!-- 设置分类标签 -->
        <div class="bg-white rounded-lg shadow mb-6">
            <div class="flex border-b overflow-x-auto">
                <button class="px-6 py-3 text-blue-500 border-b-2 border-blue-500 font-medium">个人信息</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">账号安全</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">通知设置</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">界面设置</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">权限管理</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">系统日志</button>
            </div>
        </div>

        <!-- 设置内容区域 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <!-- 左侧导航 -->
            <div class="col-span-1">
                <div class="bg-white rounded-lg shadow">
                    <div class="p-4 border-b">
                        <h3 class="font-medium text-gray-800">设置分类</h3>
                    </div>
                    <div class="p-2">
                        <ul class="space-y-1">
                            <li>
                                <a href="#" class="flex items-center p-2 text-gray-700 bg-blue-50 rounded-lg hover:bg-blue-100">
                                    <i class="fas fa-user w-5 text-blue-500"></i>
                                    <span class="ml-2">基本信息</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-blue-100">
                                    <i class="fas fa-id-card w-5 text-blue-500"></i>
                                    <span class="ml-2">职位信息</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-blue-100">
                                    <i class="fas fa-phone-alt w-5 text-blue-500"></i>
                                    <span class="ml-2">联系方式</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-blue-100">
                                    <i class="fas fa-image w-5 text-blue-500"></i>
                                    <span class="ml-2">头像设置</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 右侧设置内容 -->
            <div class="col-span-3">
                <div class="bg-white rounded-lg shadow">
                    <div class="p-4 border-b">
                        <h3 class="font-medium text-gray-800">基本信息</h3>
                    </div>
                    <div class="p-6">
                        <form>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- 姓名 -->
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                    <input type="text" id="name" value="张经理" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                
                                <!-- 工号 -->
                                <div>
                                    <label for="employeeId" class="block text-sm font-medium text-gray-700 mb-1">工号</label>
                                    <input type="text" id="employeeId" value="EMP20230001" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" readonly>
                                </div>
                                
                                <!-- 性别 -->
                                <div>
                                    <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                                    <select id="gender" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                        <option selected>男</option>
                                        <option>女</option>
                                    </select>
                                </div>
                                
                                <!-- 出生日期 -->
                                <div>
                                    <label for="birthdate" class="block text-sm font-medium text-gray-700 mb-1">出生日期</label>
                                    <input type="date" id="birthdate" value="1985-06-15" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                
                                <!-- 部门 -->
                                <div>
                                    <label for="department" class="block text-sm font-medium text-gray-700 mb-1">部门</label>
                                    <select id="department" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                        <option selected>市场部</option>
                                        <option>技术部</option>
                                        <option>财务部</option>
                                        <option>人力资源部</option>
                                        <option>物流部</option>
                                        <option>客服部</option>
                                    </select>
                                </div>
                                
                                <!-- 职位 -->
                                <div>
                                    <label for="position" class="block text-sm font-medium text-gray-700 mb-1">职位</label>
                                    <select id="position" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                        <option selected>部门经理</option>
                                        <option>总监</option>
                                        <option>主管</option>
                                        <option>专员</option>
                                        <option>助理</option>
                                    </select>
                                </div>
                                
                                <!-- 邮箱 -->
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                    <input type="email" id="email" value="zhang@example.com" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                
                                <!-- 手机号 -->
                                <div>
                                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                                    <input type="tel" id="phone" value="13800138000" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                            </div>
                            
                            <!-- 个人简介 -->
                            <div class="mt-6">
                                <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
                                <textarea id="bio" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">市场部经理，负责公司市场策略制定和团队管理，有8年市场营销经验。</textarea>
                            </div>
                            
                            <!-- 头像设置 -->
                            <div class="mt-6">
                                <label class="block text-sm font-medium text-gray-700 mb-2">头像</label>
                                <div class="flex items-center">
                                    <div class="mr-4">
                                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="当前头像" class="h-20 w-20 rounded-full">
                                    </div>
                                    <div>
                                        <button type="button" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 flex items-center">
                                            <i class="fas fa-upload mr-2"></i>
                                            <span>上传新头像</span>
                                        </button>
                                        <p class="text-xs text-gray-500 mt-1">支持 JPG、PNG 格式，文件大小不超过 2MB</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 提交按钮 -->
                            <div class="mt-6 flex justify-end">
                                <button type="button" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 mr-2">
                                    取消
                                </button>
                                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                                    保存更改
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 日期格式化函数
        function formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }

        // 页面加载时设置当前日期
        document.addEventListener('DOMContentLoaded', function() {
            // 可以在这里添加其他初始化代码
        });
    </script>
</body>
</html>